<template>
  <div class="content-zpbox">
    <div class="zpbox-title">
      <div class="tit-le">
        <i @click="$router.go(-1)" class="iconfont icon-arrow-right"></i>
      </div>
      <div class="tit-rg">
        <span>我的作品</span>
      </div>
    </div>
    <div class="zpbox-box">
      <van-pull-refresh v-model="refreshing"  success-text="刷新成功" @refresh="onRefresh">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          offset="10"
        >
          <van-empty
            v-show="empty"
            class="custom-image"
            image="https://img.yzcdn.cn/vant/custom-empty-image.png"
            description="目前您还没有发布过作品哦"
          />
          <van-skeleton v-show="skeleton" v-for="(item,index) of 4" :key="index" title avatar :row="5" />
          <div @click="gozpisd(item)" class="box-msg" v-for="(item,index) of userrelase" :key="index">
            <div class="msg-uinfo">
              <div class="ui-le">
                <img :src="item.user.uportrait" alt="">
                <div class="le-msg">
                  <span>{{ item.user.username }}</span>
                  <span>{{ item.newaddTime }}</span>
                </div>
              </div>
              <div class="ui-rg">
                <div class="rg-box">
                  <span>阅读 {{ item.workflow }}</span>
                </div>
              </div>
            </div>
            <div class="msg-text">
              <span>{{ item.themetext }}</span>
            </div>
            <div class="msg-img">
              <div class="img_box" v-for='(imgs,index) in item.imgs' :key='index' v-show="index<6">
                <img :src="imgs" alt="" @click.stop="getImg(item.imgs,index)">
                <div class="img-flow" v-if="index==5" @click.stop="getImg(item,index)">
                  <span>+{{item.imgs.length-6}}</span>
                </div>
              </div>
            </div>
            <div class="msg-cz">
              <div class="cz-le" @click.stop="destorys(item)">
                <van-icon name="delete" />
              </div>
              <div class="cz-rg">
                <div class="cz-box">
                  <i class="iconfont icon-dianzan2"></i>
                  <span>{{ item.thumbs.length }}</span>
                </div>
                <div class="cz-box">
                  <i class="iconfont icon-pinglun3"></i>
                  <span>{{ item.comments.length }}</span>
                </div>
                <div class="cz-box">
                  <i class="iconfont icon-fenxiang"></i>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { ImagePreview, Toast, Dialog } from 'vant';
export default {
  name: "userzp",
  data(){
    return{
      userrelase: [],
      loading: false,
      finished: false,
      refreshing: false,
      uzpage: null,
      page: 1,
      skeleton: true,
      empty: false,
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
        ],
      ],
    }
  },
  created() {
    const uid = localStorage.getItem("uid");
    this.zpfind(uid)
  },
  methods:{
    async destorys(item){
      console.info(item)
      Dialog.confirm({
        title: '温馨提示',
        message: '该操作会永久删除,是否要删除',
      })
        .then(async () => {
          const res = await this.$axios({
            url: '/blog/releasedelete',
            method: 'post',
            data: {
              releaseid: item.releaseid
            }
          })
          const { success, msg } = res.data
          if(success){
            Toast.success(msg);
            this.onRefresh();
          }else {
            Toast.fail(msg);
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
    onLoad(){
      console.info("加载数据")
      const uid = localStorage.getItem("uid");
      this.loading = true;
      if (this.page > this.uzpage) {
        this.loading = false;
        this.finished = true;
      }else {
        setTimeout(()=>{
          this.zpfind(uid)
          this.loading = false;
        },1000)
      }
    },
    onRefresh(){
      this.skeleton = true
      setTimeout(() => {
        const uid = localStorage.getItem("uid");
        this.userrelase = []
        this.page = 1
        this.zpfind(uid)
        this.refreshing = false;
        this.finished = false;
        this.skeleton = false;
      }, 1000);
    },
    async zpfind(uid){
      try {
        const res = await this.$axios({
          url:'/blog/releasefind',
          method:"post",
          data:{
            uid,
            page: this.page,
          }
        })
        const {success, msg, data, maxpage} = res.data
        if (success){
          if(data.length == 0 && this.page == 1){
            this.empty = true
            this.skeleton = false
          }
          if(data.length != 0){
            this.skeleton = false;
          }
          data.map(r=>{
            const year = new Date(r.addTime).getFullYear();
            const mouth = `${new Date(r.addTime).getMonth()+1}`.padStart(2, 0);
            const day = `${new Date(r.addTime).getDate()}`.padStart(2, 0);
            r.newaddTime = `${year}-${mouth}-${day}`
            r.imgs = []
            r.theme = r.theme.split(',')
            r.pictures.map(url=>{
              r.imgs.push(url.photourl)
            })
          })
          this.uzpage = maxpage
          data.forEach(r=>{
            this.userrelase.push(r)
          })
          this.page++;
          console.info(data)
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    getImg(images,index){
      ImagePreview({
        images: images,
        showIndex:true,
        loop:false, //是否循环播放
        startPosition:index
      })
    },
    gozpisd(item){
      this.$router.push({
        name: "zpisd",
        params: {
          release: item
        }
      })
    }
  },
}
</script>

<style scoped lang="scss">
.content-zpbox{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .zpbox-title{
    width: 100%;
    height: vw(90);
    box-sizing: border-box;
    line-height: vw(90);
    background-color: #ffffff;
    display: flex;
    .tit-le{
      width: vw(100);
      i{
        margin-left: vw(30);
        font-size: vw(50);
        color: #c1c1c1;
      }
    }
    .tit-rg{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        transform: translate(vw(-50),vw(2));
        font-size: vw(32);
      }
    }
  }
  .zpbox-box{
    flex: 1;
    width: 100%;
    background-color: #ffffff;
    overflow-y: auto;
    .box-msg{
      width: vw(690);
      margin: vw(10) auto;
      .msg-uinfo{
        width: 100%;
        height: vw(100);
        display: flex;
        .ui-le{
          width: vw(510);
          display: flex;
          align-items: center;
          img{
            width: vw(85);
            height: vw(85);
            border-radius: 50%;
            object-fit: cover;
          }
          .le-msg{
            padding-left: vw(30);
            display: flex;
            flex-direction: column;
            line-height: vw(40);
            span{
              font-size: vw(28);
              &:last-child{
                color: #d5d5d5;
                font-size: vw(24);
              }
            }

          }
        }
        .ui-rg{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          .rg-box{
            height: vw(40);
            border-radius: vw(30);
            border: 1px solid #d5d5d5;
            justify-content: center;
            display: flex;
            align-items: center;
            span{
              padding: 0 vw(20);
              font-size: vw(20);
              color: #d5d5d5;
            }
          }
        }
      }
      .msg-img{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding-top: vw(10);
        .img_box{
          position: relative;
          padding-right: vw(10);
          img{
            width: vw(220);
            height: vw(220);
            object-fit: cover;
          }
          .img-flow{
            position: absolute;
            width: vw(220);
            height: vw(220);
            top: 0;
            background-color: #00000070;
            display: flex;
            align-items: center;
            justify-content: center;
            span{
              font-size: vw(60);
              color: #b3aaaa;
            }
          }
        }
      }
      .msg-cz{
        display: flex;
        .cz-le{
          display: flex;
          align-items: center;
          font-size: vw(40);
          color: lightsalmon;
        }
        .cz-rg{
          flex: 1;
          display: flex;
          justify-content: flex-end;
          .cz-box{
            padding:vw(15);
            display: flex;
            align-items: center;
            i{
              font-size: vw(40);
            }
            span{
              margin-left: vw(10);
              font-size: vw(30);
            }
          }
        }
      }
    }
  }
}
</style>
